<template>
    <div class="wrap">
        <vue-particles color="#FF6600" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
            linesColor="#FF6600" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
            :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi" />
        <div class="login">
            <div class="title"><img src="@/assets/images/logo.png" alt="">活动管理系统</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="口令码" prop="misCode">
                    <el-input type="text" v-model="ruleForm.misCode"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="name">
                    <el-input type="text" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                    <el-button @click="register()">注册</el-button>
                </el-form-item>
            </el-form>
            <p>初始密码admin/123456</p>
        </div>
    </div>
</template>
<script>
import md5 from 'md5'
import sha1 from 'sha1'

export default {
    data() {
        return {
            ruleForm: {
                name: '',
                pass: '',
                misCode: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                misCode: [
                    { required: true, message: '请输入口令码', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$showLoading()
                    // 验证口令码
                    let appid = 'zg_b7ae18fcd5ebb436bf773676d486f9645ea2cc66'
                    let noncestr = 'gsoffcn'
                    let timestamp = new Date().getTime()
                    let code = md5('ZGJYOFFCN@!XXJSRJYB');
                    let token = '6GMvQRt31V6IHZBTDem24uljIVndxh'
                    let url = 'https://gshd.offcn.com/'
                    let sign = sha1(`appid=${appid}&code=${code}&noncestr=${noncestr}&timestamp=${timestamp}&token=${token}&url=${url}`)
                    this.$zgHttp({
                        url: '/api/index/index/mispwdcode',
                        params: {
                            appid,
                            sign,
                            noncestr,
                            timestamp
                        }
                    }).then(res => {
                        if (res.data.data !== this.ruleForm.misCode) {
                            this.$hideLoading()
                            this.$message.error('请输入正确的口令码/账号/密码')
                            return false
                        } else {
                            // 验证账号密码
                            this.$http.post('/user/login', this.ruleForm).then(res => {
                                if (res.data.status == 1) {
                                    localStorage.setItem('token', 'Bearer ' + res.data.token)
                                    localStorage.setItem('userName', res.data.userInfo.name)
                                    localStorage.setItem('rule', res.data.userInfo.ruleArray)
                                    setTimeout(() => {
                                        this.$message.success(res.data.msg);
                                        this.$hideLoading()
                                        this.$router.push('/home')
                                    }, 1000);
                                } else {
                                    this.$hideLoading()
                                    this.$message.error(res.data.msg);
                                }
                            })
                        }
                    }).catch(err => {
                        this.$message.error(err);
                        this.$hideLoading()
                        return false
                    })
                } else {
                    this.$message.error('error submit!!');
                    this.$hideLoading()
                    return false;
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        register() {
            this.$router.push('/register_create')
        }
    },
    created() {
        this.$hideLoading()
    }
}
</script>
<style>
.wrap {
    height: 100vh;
    background: #efefef;
}
.lizi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.login {
    position: absolute;
    width: 500px;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
    border-radius: 30px;
    padding: 30px;
}
.title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    margin-bottom: 15px;
}
.title img {
    max-width: 100%;
    display: block;
    margin: 0 auto 20px;
}
</style>